<template>
        <div id="thjl" class="container-fluid padding">
            <fieldset class="layui-elem-field layui-field-title">
                <legend v-if="myCdr!='myCdr'" >所有电话记录以及话单列表</legend>
                <legend v-if="myCdr=='myCdr'" >我的电话记录以及话单列表</legend>
            </fieldset>
            <table class="layui-hide" id="cdrToolbarList"  lay-filter="cdrToolbarList"></table>
            <script type="text/html" id="direction" v-pre>
              <input type="checkbox" name="direction" disabled value="{{d.direction}}" lay-skin="switch" lay-text="拨入|播出" lay-filter="directionD" {{d.direction=='outbound'?'checked':''}} >
            </script>
            <a id="download" rel="nofollow" hidden><i id="download_i" ></i></a>
            <audio controls="controls" id="sound" hidden>
            </audio>
            <script type="text/html" id="fileBar">
              <button class="el-button el-button--primary el-button--mini is-round" lay-event="play" >听取</button>
              <button class="el-button el-button--success el-button--mini is-round" lay-event="download" >下载</button>
              <button class="el-button el-button--danger el-button--mini is-round" lay-event="pause" >暂停</button>
            </script>
            <el-form :model="searchData" :inline="true" ref="searchData" label-width="100px" class="padding">
                    <el-form-item label="通话时长" prop="billsec">
                        <el-input v-model="searchData.billsec"></el-input>
                    </el-form-item>
                    <el-form-item label="结束原因" prop="continue_on_fail">
                        <el-select v-model="searchData.continue_on_fail">
                            <el-option value="ORIGINATOR_CANCEL" label="取消">取消</el-option>
                            <el-option value="USER_BUSY" label="用户忙">用户忙</el-option>
                            <el-option value="NO_ANSWER" label="没回应">没回应</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="播出电话" prop="sip_from_user">
                        <el-input v-model="searchData.sip_from_user"></el-input>
                    </el-form-item>
                    <el-form-item label="接听电话" prop="sip_to_user">
                        <el-input v-model="searchData.sip_to_user"></el-input>
                    </el-form-item>
                    <el-form-item label="拨入/播出" prop="direction">
                        <el-select v-model="searchData.direction">
                            <el-option value="outbound" label="拨入">拨入</el-option>
                            <el-option value="inbound" label="播出">播出</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否接通" prop="answered">
                        <el-select v-model="searchData.answered">
                            <el-option value="1" label="是">是</el-option>
                            <el-option value="2" label="否">否</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="号码归属地" prop="telephone_assignment">
                        <el-input v-model="searchData.telephone_assignment"></el-input>
                    </el-form-item>
                    <el-form-item label="响铃时间区间" prop="timeZone">
                        <el-date-picker style="width: 714px;"
                                        v-model="searchData.timeZone"
                                        type="datetimerange"
                                        placeholder="选择时间范围"
                                        value-format="timestamp"
                                        align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="  ">
                        <el-button type="primary" @click="search()">查询</el-button>
                        <el-button @click="$refs['searchData'].resetFields()">重置</el-button>
                    </el-form-item>
                </el-form>
        </div>
</template>
<script>
    import {formatDateTime,returnHMS} from '../../../../common/js/util';
    export default {
        name: "cdr",
        data() {
            return {
                myCdr:"",//我的话单
                table_head:[
                    {field: 'id',fixed: 'left',  title: '序列号', width:120,totalRowText:"合计："}
                    ,{field: 'user_name',  title: '坐席名字', width:120}
                    ,{field: 'direction',  title: '拨入/拨出', width:120,templet: "#direction", unresize: true}
                    ,{field: 'sip_from_user',  title: '拨出电话', width:120}
                    ,{field: 'sip_to_user',  title: '接听电话', width:120}
                    ,{field: 'telephone_assignment',  title: '号码归属地', width:160}
                    ,{field: 'user_context',  title: '用户内容', width:120}
                    ,{field: 'start_epoch',title: '响铃时间',width:240,templet: function(res){return formatDateTime(res.start_epoch);}}
                    ,{field: 'end_epoch',  title: '结束时间', width:240,templet: function(res){return formatDateTime(res.end_epoch);}}
                    ,{field: 'duration',  title: '响铃时长（S）', width:180,templet: function(res){return returnHMS(res.duration);},totalRow:true}
                    ,{field: 'billsec',  title: '通话时长（S）', width:180,templet: function(res){return returnHMS(res.billsec);},totalRow:true}
                    ,{
                        field: 'continue_on_fail',
                        title: '结束原因',
                        width:120,
                        templet: function(res){
                            var result;
                            switch (res.continue_on_fail){
                                case "USER_BUSY":result = "用户忙";break;
                                case "NO_USER_RESPONSE":result = "没有用户回复";break;
                                case "NO_ANSWER":result = "用户没有回答";break;
                                case "CALL_REJECTED":result = "被拒绝";break;
                                default:result = "";break;
                            }
                            return result;
                        }
                    }
                    ,{field: 'uuid',  title: '通道id', width:160}
                    ,{field: 'call_uuid',  title: 'a通道', width:160}
                    ,{field: 'bridge_uuid',  title: 'b通道', width:160}
                    ,{field: 'remark',  title: '备注', width:120}
                    ,{fixed: 'right',width: 230,align:'center',templet:"#fileBar"}
                ],
                params:{},//用来得到后台的地址的
                tableConfig:{},//表格的配置文件
                searchData:{
                    billsec:"",//通话时长
                    continue_on_fail:"",//结束原因
                    answered:"",//是否接通 1是，2否
                    sip_from_user:"",//拨入电话
                    sip_to_user:"",//拨出电话
                    direction:"",//拨入/拨出
                    telephone_assignment:"",//号码归属地
                    timeZone:"",//时间区间
                },//需要搜索的数据
            }
        },
        created:function(){
            this.$nextTick(function () {
                var where = {};//传递到后台的数据
                if(this.$router.currentRoute.meta.type=="myCdr"){//解析接收到路由 是我的话单
                    this.myCdr = "myCdr";
                    where = {user_name:this.$cache_.getCookie("zuoxi"),search:this.searchData}
                }else{//是总话单
                    where = {search:this.searchData}
                }
                layui.use('table', ()=>{//加这个是防止刷新的时候会出现不存在render方法
                    // 再次加载出表格数据（之前已经加载出来了dom数据）
                    this.tableConfig = {
                        elem: '#cdrToolbarList'
                        ,url: burl+'cti-manager-cdr/list?type='+this.myCdr//数据接口
                        ,method: "post"
                        ,where: where
                        ,toolbar: '#cdrToolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        ,title: '通话记录'
                        ,height: 600
                        ,cols: [this.table_head]
                        ,page: true //开启分页
                        ,limits: ['30','90','150','300']
                        ,totalRow: true //开启数据统计
                        , done: function (res) {
                            this.params = res.params;
                        }
                    };
                    layui.table.render(this.tableConfig);
                    //头工具栏事件
                    layui.table.on('toolbar(cdrToolbarList)', (obj)=>{
                        var checkStatus = layui.table.checkStatus(obj.config.id);
                        switch(obj.event){
                            case 'getCheckData':
                                var data = checkStatus.data;
                                layer.alert(JSON.stringify(data));
                                break;
                            case 'getCheckLength':
                                var data2 = checkStatus.data;
                                layer.msg('选中了：'+ data2.length + ' 个');
                                break;
                            case 'isAll':
                                layer.msg(checkStatus.isAll ? '全选': '未全选');
                                break;
                        };
                    });
                    //监听行工具事件
                    layui.table.on('tool(cdrToolbarList)', (obj)=>{
                        //查询到相对于的文件
                        var tempObj = "";
                        this.$post('cti-manager-ly/find?id='+obj.data.uuid,{}).then((response) => {
                            if (response.data!="") {
                                tempObj = response.data;
                                switch(obj.event) {
                                    case 'play':
                                        $('#sound').attr('src', tempObj.httpPath);
                                        var sound = $('#sound')[0];
                                        sound.loop = false;
                                        sound.play();
                                        break;
                                    case 'download':
                                        var str = tempObj.httpPath;
                                        var t = str.lastIndexOf("/");
                                        $('#download').attr('href', this.params.controller + "?path=" + tempObj.httpPath);
                                        $('#download').attr('download', str.substr(t + 1));
                                        $('#download_i').click()
                                        break;
                                    case 'pause':
                                        $('#sound')[0].pause()
                                        break;
                                }
                            }else{
                                layer.msg("文件不存在！",{icon:2});
                            }
                        }).catch((response) => {
                            layer.msg("错误！",{icon:2});
                        });
                    });
                });
            });
        },
        methods:{
            search:function () {//查询数据
                var where = {};//传递到后台的数据
                if(this.$router.currentRoute.meta.type=="myCdr"){//解析接收到路由 是我的话单
                    this.myCdr = "myCdr";
                    where = {user_name:this.$cache_.getCookie("zuoxi"),search:this.searchData}
                }else{//是总话单
                    where = {search:this.searchData}
                }
                this.tableConfig.where = where;
                layui.table.render(this.tableConfig);
            },
            reset:function () {//重置查询数据
                this.searchData = {
                    billsec:"",//通话时长
                    continue_on_fail:"",//结束原因
                    answered:"",//是否接通 1是，2否
                    sip_from_user:"",//拨入电话
                    sip_to_user:"",//拨出电话
                    direction:"",//拨入/拨出
                    telephone_assignment:"",//号码归属地
                    timeZone:"",//时间区间
                }//需要搜索的数据
            }
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .el-select{
        width: 300px;
    }
    .el-input{
        width: 300px;
    }
</style>
